<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            角色名称：<input type="text" name="roleName"/>
                        </li>
                        <li>
                            角色状态：<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
                            <option value="">所有</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                        </li>
                        <li class="select-time">
                            <label>创建时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            <a class="btn btn-success btn-rounded btn-sm" onclick="switchTo()"><i class="fa fa-refresh"></i>&nbsp;切换</a>
                        </li>
                    </ul>
                </div>
            </form>

        </div>


        <div class="col-sm-12 select-table table-striped" style="min-height:90%" id="echarts_table">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/echarts/echarts.js}"></script>
<script th:src="@{/ruoyi/js/toChartsJson.js}"></script>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:user:remove')}]];
    var resetPwdFlag = [[${@permission.hasPermi('system:user:resetPwd')}]];
    var datas = [[${@dict.getType('sys_normal_disable')}]];
    var prefix = ctx + "firststage/brandCategory";
    var myChart;
    var returnData;//后台返回的数据

    //默认初始化显示图表
    $(function() {
        $.ajax({
            url:prefix+"/listTest",
            type:'post',
            dataType:'json',
            success:function (data) {
                returnData = data.rows;
                createTable(returnData);
            },error:function () {
                console.log('error!');
            }
        })
    });

    //切换图表报表
    function switchTo() {
        var isreport = $("#bootstrap-table").html();//是否为报表
        if (isreport == undefined) {//判断是否为报表，是则切换图表，否则切换报表
            myChart.dispose();//释放图表，摧毁对象
            $("#echarts_table").empty();
            $("#echarts_table").append("<table id=\"bootstrap-table\" data-mobile-responsive=\"true\"></table>");
            createTable(returnData);
        } else {
            createCharts(returnData);
        }
    }


    //创建报表
    function createTable(returnData) {
        var options = {
            // data:returnData,//这里直接用本地数据初始化表格获取不到分页信息（条数等等）
            url:prefix+"/listTest",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            // sortName: "createTime",
            // sortOrder: "desc",
            modalName: "用户",
            search: false,
            showExport: false,
            columns: [
                {
                    field: 'brand',
                    title: '品牌',
                    sortable: true
                },
                {
                    field: 'category',
                    title: '类型',
                    sortable: true
                },
                {
                    field: 'star',
                    title: '平均星星数',
                    sortable: true
                },
                {
                    field: 'averageprice',
                    title: '平均价格',
                    sortable: true
                },
                {
                    field: 'commentamount',
                    title: '平均评论数',
                    sortable: true
                }]
        };
        $.table.init(options);
        /*$('#bootstrap-table').bootstrapTable({
            url:null,
            data:returnData,
            // url: options.url,                                   // 请求后台的URL（*）
            contentType: "application/x-www-form-urlencoded",   // 编码类型
            method: 'post',                                     // 请求方式（*）
            cache: false,                                       // 是否使用缓存
            // striped: _striped,                                  // 是否显示行间隔色
            sortable: true,                                     // 是否启用排序
            sortStable: true,                                   // 设置为 true 将获得稳定的排序
            // sortName: _sortName,                                // 排序列名称
            // sortOrder: _sortOrder,                              // 排序方式  asc 或者 desc
            // pagination: $.common.visible(options.pagination),   // 是否显示分页（*）
            pageNumber: 1,                                      // 初始化加载第一页，默认第一页
            pageSize: 10,                                       // 每页的记录行数（*）
            pageList: [10, 25, 50],                             // 可供选择的每页的行数（*）
            iconSize: 'outline',                                // 图标大小：undefined默认的按钮尺寸 xs超小按钮sm小按钮lg大按钮
            toolbar: '#toolbar',                                // 指定工作栏
            sidePagination: "server",                           // 启用服务端分页
            // search: $.common.visible(options.search),           // 是否显示搜索框功能
            // showSearch: $.common.visible(options.showSearch),   // 是否显示检索信息
            // showRefresh: $.common.visible(options.showRefresh), // 是否显示刷新按钮
            // showColumns: $.common.visible(options.showColumns), // 是否显示隐藏某列下拉框
            // showToggle: $.common.visible(options.showToggle),   // 是否显示详细视图和列表视图的切换按钮
            // showExport: $.common.visible(options.showExport),   // 是否支持导出文件
            // queryParams: $.table._params,                       // 传递参数（*）
            columns: [
                {
                    field: 'brand',
                    title: '品牌',
                    sortable: true
                },
                {
                    field: 'category',
                    title: '类型',
                    sortable: true
                },
                {
                    field: 'star',
                    title: '星星数',
                    sortable: true
                },
                {
                    field: 'averageprice',
                    title: '平均价格',
                    sortable: true
                },
                {
                    field: 'commentamount',
                    title: '评论数',
                    sortable: true
                }],                           // 显示列信息（*）
            // responseHandler: $.table.responseHandler            // 回调函数
        });*/
    }
//------------------------------------------------------------------------------------------------
    //创建图表
    function createCharts(returnJson) {
        var chartJson = brandCategoryToChartJsonTest(returnJson);
        // console.log(chartJson);

        myChart = echarts.init(document.getElementById('echarts_table'));
        var option = {
            title: {
                text: '2012-12品牌货分析表',//图表名称 2012-12资产分析
                textStyle : {
                    fontSize : 22//标题字体
                },
                subtextStyle :	{
                    fontSize  : 18,
                    color : 'gray'
                },
                x: 'center', // 'center' | 'left' | {number},
                y: 'top'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: '97%',
                top: 'center',
                feature: {
                    mark: {show: true},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },

            dataZoom:[
                {
                    show: true,
                    startValue: 0,
                    endValue: 4
                }
            ],
            legend: {
                data:['平均价格','平均星星评价数','平均评论数'],
                y:'30',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : chartJson.titleJson,
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'平均价格',
                    type:'bar',
                    data:chartJson.averagepriceJson//[320, 332, 301, 334, 390, 330]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    }
                },
                {
                    name:'平均星星评价数',
                    type:'bar',
                    data:chartJson.starJson//[120, 132, 101, 134, 90, 230]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    }
                },
                {
                    name:'平均评论数',
                    type:'bar',
                    data:chartJson.commentamountJson//[220, 182, 191, 234, 290, 330]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);
    }

</script>
</body>
</html>